<template>
	<view>
		<template v-if="isShow === false">
			<view style="width: 750rpx; height: 100rpx; background: white; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: sticky; z-index: 2; top: 0;">
				<image v-if="isBack" @tap="toBack" src="../../../static/return.png" style="margin-right: 20rpx; width: 50rpx; height: 50rpx;" mode="aspectFit"></image>
				<view class="searchModel">
					<input type="text" @input="onKeyInput" v-model="inputValue" @focus="isFocus" @blur="noFocus" placeholder-style="font-size:30rpx;" placeholder="输入想要查看的养殖仓编号" />
					<text class="icon iconfont icon-search "></text>
				</view>
			</view>
			
			<view @touchmove.stop.prevent="moveHandle" v-if="isShowModel" class="menuModel">
				<scroll-view scroll-y="true" class="dataViewBox" v-if="isSearchResultShow">
					<template v-if="isSearch == true">
						<block v-for="(item,index) in searchResult" :key="index">
							<view @tap="chooseCheck(index)" style="border-top: 2rpx solid #EEEEEE; width: 750rpx; height: 80rpx; margin-top: 3rpx; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
								<text style="font-size: 32rpx; margin-left: 20rpx;">{{item.warehouse_serial_number}}</text>
								<image src="../../../static/jiantou1.png" style="margin-right: 20rpx; width: 50rpx; height: 50rpx;" mode="aspectFit"></image>
							</view>
						</block>
					</template>
					<template v-else>
						<block>
							<view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
								<text style="color: #C0C0C0; font-size: 32rpx;">搜索结果为空</text>
							</view>
						</block>
					</template>
				</scroll-view>
			</view>
			
			<form v-for="(item,index) in newMiddleList" :key="index">
				<view style="height: auto; width: 710rpx; margin-left: 20rpx;" class="animated bounceInLeft slow">
					<view class="cu-form-group margin-top" style="border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;">
						<image src="../../../static/rear/pigstyAndHouse/number.png" style="height: 48rpx; width: 48rpx;" mode="aspectFit"></image>
						<text style="font-size: 32rpx; font-weight: bold; width: 400rpx; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">养殖仓编号：{{item.warehouse_serial_number}}</text>
						<image src="../../../static/rear/pigstyAndHouse/editer.png" @click="goEditor(index)" style="height: 48rpx; width: 48rpx;" mode="aspectFit"></image>
						<image src="../../../static/rear/pigstyAndHouse/delete.png" @click="deletewareHouse(index)" style="height: 56rpx; width: 56rpx;" mode="aspectFit"></image>
					</view>
					<view class="cu-form-group">
						<view class="title">养殖仓面积</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.warehouse_area}}m²</text>
					</view>
					<view class="cu-form-group">
						<view class="title">养殖数量</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.warehouse_number}}头</text>
					</view>
					<view class="cu-form-group">
						<view class="title">养殖仓负责人</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.warehouse_admin_name}}</text>
					</view>
					<view class="cu-form-group">
						<view class="title">联系电话</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.warehouse_phone}}</text>
					</view>
					<view class="cu-form-group">
						<view class="title">修改时间</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.warehouse_modification_time}}</text>
					</view>
					<view class="cu-form-group" style="border-bottom-left-radius: 40rpx; border-bottom-right-radius: 40rpx;">
						<view class="title">创建时间</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.warehouse_creation_time}}</text>
					</view>
				</view>
			</form>
			
			<view class="bottomNone" v-if="isBottom">
				<text>已无更多记录</text>
			</view>
		</template>
		<template v-else>
			<xw-empty :isShow="isShow" text="暂无养殖仓信息" textColor="#777777"></xw-empty>
		</template>
	</view>
</template>

<script>
	import User from "../../../common/user.js"
	import xwEmpty from '../../../components/xw-empty/xw-empty.vue'
	export default {
		
			data () {
				return {
					inputValue: '',
					number: '',
					isShowModel:false,
					isSearchResultShow: false,
					isSearch: false,
					isBack: false,
					step: 0,
					//关键词搜索出来的结果列表
					searchResult:[],
					//中间列表
					middleList: [],
					
					isBottom: false,
					wareHouseList: [],
					editorWarehouseNo: '',
					editorcount: '',
					editorwarehousePerson: '',
					editorphone: '',
					editorArea: '',
					editorID: '',
					isShow: false,
					farmId: ''
				}
			},
			components: {
				xwEmpty
			},
			//导航栏按钮点击监听
			onNavigationBarButtonTap:function(value){
				uni.navigateTo({
					url: './breedingHouseRegistration'
				})
			},
			methods: {
				//input里的@input监听输入
				onKeyInput: function(event) {
					this.searchResult = []
						if(event.target.value == ''){
							this.isSearchResultShow == false
							this.isSearch = false
							this.isShowModel = false
						}else{
							this.isSearchResultShow = true
							for(let i = 0; i<this.wareHouseList.length; i++){
								this.number = this.wareHouseList[i].warehouse_serial_number.toString().indexOf(event.target.value)
								if(this.number >= 0) {
									this.searchResult.push(this.wareHouseList[i])
								}
							}
							
							if(this.searchResult.length > 0) {
								this.isSearch = true
							}else{
								this.isSearch = false
							}
							
							this.isShowModel = true
						}
				},
				
				isFocus: function(event) {
					if(event.target.value == ''){
						this.isSearchResultShow = false
					}else{
						this.isShowModel = true
						this.isSearchResultShow = true
						if(this.searchResult.length > 0) {
							this.isSearch = true
						}else{
							this.isSearch = false
						}	
					}
						
				},
				
				noFocus: function(event) {
					setTimeout(() => {
						this.isSearchResultShow = false
						this.isShowModel = false
					},200)
				},
				
				chooseCheck: function(index) {
					//console.log(index)
					this.inputValue = this.searchResult[index].warehouse_serial_number
					this.isBack = true
					this.middleList = []
					this.middleList.push(this.searchResult[index])
					this.step = 1
					this.isBottom = false
				},
				
				toBack() {
					this.middleList = []
					this.isBack = false
					this.inputValue = ''
					this.searchResult = []
					this.isSearch = false
					this.step = 0
					this.init()
				},
				
				
				//跳转编辑页
				goEditor (index) {
					this.editorArea = this.middleList[index].warehouse_area
					this.editorWarehouseNo = this.middleList[index].warehouse_serial_number
					this.editorcount = this.middleList[index].warehouse_number
					this.editorphone = this.middleList[index].warehouse_phone
					this.editorID = this.middleList[index].warehouse_id
					this.editorwarehousePerson = this.middleList[index].warehouse_admin_name
					uni.navigateTo({
						url: './breedingHouseEditor'+ 
							'?editorID=' +this.editorID +
							'&editorWarehouseNo=' + this.editorWarehouseNo +
							'&editorcount=' + this.editorcount +
							'&editorphone=' + this.editorphone+
							'&editorwarehousePerson=' + this.editorwarehousePerson+
							'&editorArea=' + this.editorArea
					})
				},
				//删除养殖仓
				deletewareHouse (index) {
					uni.showModal({
						title: '删除',
						content: '确定要删除这一个养殖仓吗？删除后，该养殖仓下的相关信息会被删除！',
						success: (res) => {
							if(res.confirm){
								uni.showLoading({
									title: 'Loading...'
								})
								uni.request({
									url: this.confige.webUrl+'/livestock/delWarehouse',
									data: {
										warehouseId: this.middleList[index].warehouse_id
									},
									method: 'GET',
									header: {
										"X-Token":this.User.token
									},
									success: (res) => {
										console.log(res)
										if(res.data.code == 400){
											uni.showModal({
												title: '提示',
												content: res.data.message,
												success: (option) => {
													if(option.confirm){
														return;
													}
												}
											})
										}
									},
									fail: (res) => {
										uni.showModal({
											title: '提示',
											content: res.data.message,
											success: (option) => {
												if(option.confirm){
													return;
												}
											}
										})
									}
								})
								setTimeout(() => {
									this.toBack()
									uni.hideLoading()
								},1000)	
							}
						}
					})
				},
				//初始化数据
				init () {
					uni.request({
						url:this.confige.webUrl+'/livestock/selWarehouse',
						data:{
							farm_id: this.User.userInfo.farm_id
						},
						header:{
							"X-Token":this.User.token
						},
						success: (res) => {
							//console.log(res)
							if(res.data.result == null) {
								this.isShow = true
							}else{
								this.isShow = false
								this.wareHouseList = res.data.result
								this.middleList = this.wareHouseList
								console.log(this.middleList)
							}
						}
					})		
				}
			},
			computed: {
				newMiddleList:function () {
					return this.middleList.reverse()
				}
			},
			onLoad() {
				
			},
			onShow() {
				this.toBack()
			},
			onReady() {
				
			},
			//监听下拉刷新
			onPullDownRefresh() {
				this.wareHouseList = []
				setTimeout(() => {
					this.toBack()
					uni.stopPullDownRefresh()
				},1000)
			},
			//监听返回键
			onBackPress(e) {
				if(e.from == 'backbutton') {
					if(this.step == 0) {
						return false
					}else{
						this.toBack()
					}
					return true
				}
			},
			//监听触底
			onReachBottom() {
				this.isBottom = true	
			},
	}
</script>

<style lang="less">
	@import '../../../common/animate.css';
	@import '../../../common/main.css';
	@import "../../../common/iconfont.css";
	
	page{
		background: #f8f8f8;
	}
	
	.menuModel{
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100vh;
		height: 100vh;
		background-color: rgba(0,0,0,0.2);
		// position: relative;
		.menu{
			z-index: 2;
			position: fixed;
			top:4rpx;
			right:18rpx;
			width: 402rpx;
			height: 344rpx;
			background-image: url(../../../static/qipa.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			// align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
	
	.searchModel{
		width: 80%;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: center;
		padding:5rpx;
		height: 60rpx;
		border: 2rpx solid #4AC997;
		border-radius: 60rpx;
		color: #717171;
		>input{ width: 85%;}
		>text{font-size: 35rpx;}
	}
	
	.dataViewBox {
		position: fixed;
		z-index: 2;
		top: 100rpx;
		width: 750rpx;
		background: white;
		min-height: 100rpx;
		max-height: 600rpx;
		display: flex;
		flex-direction: column;
		//flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		align-content: space-around;
		border-bottom: 1rpx solid #dfdfdf;
	}
	
	.bottomNone {
		width: 750rpx;
		height: 100rpx;
		margin-top: 40rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		background: #F2F2F2;
		color: #BBBBBB;
	}
</style>
